<!-- 蓝色登录页面2 -->
<template>
	<view>
		<view class="img-a">
			<view class="t-b">
				欢迎使用智督云安全生产
			</view>
			<view class="t-c">
				集团版
			</view>
		</view>
		<view class="login-view">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<input class="zh-input" type="text" name="username" placeholder="请输入账号"
							v-model="form.username" style="padding-left: 32rpx;" />
					</view>
					<view class="zdy-input">
						<input class="pwd-left" :password="isShowPwd" name="password"
							placeholder="请输入字母/数字/字符组成的6-16位密码" v-model="form.password" />
						<view class="iconfont" style="color: #a6a6a6;" :class="[isShowPwd?'icon-app-yulan-close':'icon-app-yulan-open']"
							@click="switchIcon()"></view>
					</view>
					<view class="password">
						<view class="forgetpwd" @click="gotoFP">忘记密码</view>
					</view>
					<!-- <button style="background: rgba(15, 83, 172, 1);" @click="togoLogin()">登 录</button> -->
				</form>
				
				<view class="com-itembootom">
					<view class="item-btn2" @click="togoLogin()">
						<view>
							登录
						</view>
					</view>
					<view class="item-btn" @click="gotoApplyTrial">
						<view>申请试用</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="agreement">
			<u-checkbox-group @change="onChangeAgree">
				<u-checkbox activeColor="rgba(15, 83, 172, 1);"></u-checkbox>
			</u-checkbox-group>
			<view class="agreement-txt">已阅读并同意<view class="privacy" @click="togoPrivacy">《隐私政策》</view>和<view
					class="privacy" @click="togouserxieyi">《用户协议》</view>
			</view>
		</view>
		<view style="height: 48rpx;"></view>
		<view class="tel">如有疑问，可联系<span style="color:#0F53AC" @click="freeTell">13439494660</span>进行咨询。</view>
		<u-overlay :show="showPwdTip" mode="center" round="6">
			<view class="tip_box">
				<view class="title">
					提示
				</view>
				<view class="top">
					<text v-if="errPwd===5">密码已连续输错5次，账号已被锁定，请点击忘记密码找回或者24小时后重试</text>
					<text v-else>密码错误，您今天还剩{{5-errPwd}}次机会，请重新输入</text>
				</view>
				<view class="btn">
					<view class="cacel_btn" @click="cacelForgetPwd">
						知道了
					</view>
					<view class="forget_btn" @click="gotoForgetPwd">
						忘记密码
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>
<script>
	import {
		mapMutations
	} from "vuex";
	import md5 from '@/common/md5.min.js';
	import code from "../../../uni_modules/uview-ui/libs/config/props/code";
	export default {
		data() {
			return {
				roleId: 0,
				form: {
					username: "",
					password: ""
				},
				checked: false,
				checked2: true,
				isShowPwd: true,
				resultInfo: {},
				code: "",
				corpId: "",
				showPwdTip: false,
				errPwd: 0,
			};
		},
		onLoad() {
			uni.setStorageSync('userInfo', '')
			let username = uni.getStorageSync('username')
			let password = uni.getStorageSync('password')
			let checked = uni.getStorageSync('checked')
			this.form.username = username
			this.form.password = password
			this.checked2 = checked
			uni.hideShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			//判断是否授权
			let userInfo = uni.getStorageSync('userInfo')
			if (!userInfo || userInfo.thirdId == '') {
				this.getCode()
			} else {
				//已授权
			}
		},
		onShow() {
			let that = this;

		},
		methods: {
			freeTell() {
				wx.makePhoneCall({
					phoneNumber: '134-3949-4660', //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			//知道了
			cacelForgetPwd() {
				this.showPwdTip = false
			},
			//忘记密码
			gotoForgetPwd() {
				this.showPwdTip = false
				this.gotoFP()
			},
			...mapMutations(["setRoleId"]),
			//用户协议
			onChangeAgree(e) {
				this.checked = !this.checked;
			},
			//记住密码
			onChangeAgree2(e) {
				this.checked2 = !this.checked2
			},
			switchIcon() {
				this.isShowPwd = !this.isShowPwd;
			},
			//跳转忘记密码页面
			gotoFP() {
				uni.navigateTo({
					url: '/pages/subPackagesD/login/fgPassword'
				})
			},
			//授权逻辑1.获取code
			getCode() {
				const that = this
				uni.login({
					provider: 'weixin',
					success: function(resp) {
						that.code = resp.code;
						that.getUserInfo(resp.code)
					}
				})
			},
			//获取用户信息
			getUserInfo(code) {
				const that = this
				uni.getUserInfo({
					desc: '获取你的昵称、头像、地区及性别',
					success: (obj) => {
						uni.setStorageSync('portrait', obj.userInfo.avatarUrl);
						let params = {
							companyId: 0,
							code,
							iv: obj.iv,
							encryptedData: obj.encryptedData
						}
						that.getEmpower(params)
					},
					fail: res => {
						//拒绝授权
						uni.showToast({
							title: '您拒绝了请求,不能正常使用小程序',
							icon: 'error',
							duration: 2000
						});
						return;
					},
					complete: () => {
						// 隐藏loading
						uni.hideLoading();
					},
				});
			},

			//微信授权接口
			getEmpower(params) {
				const that = this
				uni.$u.http.post(`/base/mobile/userInfo/wx/login`, params)
					.then(res => {
						if (res.code == 0) {
							that.resultInfo = res.data
							//由于这里逻辑特殊 后续登录会替换掉状态值 所以单独保存一份状态值来做判断
							uni.setStorageSync('userInfo', res.data);
							//绑定id
							uni.setStorageSync('thirdId', res.data.thirdId);
							uni.setStorageSync('bindType', 1);
							let existFlag = uni.getStorageSync('userInfo').existFlag;
							let modifyPwdFlag = uni.getStorageSync('userInfo').modifyPwdFlag;
							let token = uni.getStorageSync('userInfo').token;

							if (existFlag == 1 && token && modifyPwdFlag == 1) {
								uni.$u.http.get('/base/mobile/sysMenuInfo/getMobileMenuListByRole').then(res => {
									if (res.code == 0) {
										if (res.data && res.data.length >= 0) {
											uni.setStorageSync('menu', res.data);
										}
										this.setRoleId(this.roleId);
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/work/index'
											})
										}, 500)
									}
								}).catch(error => {
									uni.$u.toast(error)
								})
							}
						} else if (res.code == 10030) {
							uni.navigateTo({
								url: '/pages/subPackagesD/expire/index'
							})
						}
					}).catch(err => {})
			},

			//当前登录按钮操作
			togoLogin() {
				var that = this;
				if (!that.form.username) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					});
					return;
				}
				if (!that.form.password) {
					uni.showToast({
						title: '请输入您的密码',
						icon: 'none'
					});
					return;
				}
				if (!that.checked) {
					uni.showToast({
						title: '请阅读并勾选以下协议',
						icon: 'none'
					});
					return;
				}
				if(!/^[a-zA-Z0-9]{6,11}$/.test(that.form.username)){
					uni.showToast({
						title: '请输入由数字/字母组成的6-11位账号',
						icon: 'none'
					});
					return;
				}
				
				//展示加载框
				uni.setStorageSync('username', that.form.username)
				uni.showLoading({
					title: '加载中',
				});
				let c = uni.getStorageSync('userInfo')
				if (!c || c.thirdId == '') {
					uni.hideLoading()
					this.getCode()
					// uni.showModal({
					// 	title: '授权登录',
					// 	content: '是否授权登录智督云安全生产集团版',
					// 	success: (res) => {
					// 		if (res.confirm) {
					// 			console.log('用户点击确定');
					// 			//开始授权 获取code 并授权
					// 			this.getCode()
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// })
				}
				//未绑定
				if (c.existFlag == 0) {
					let unionId = uni.getStorageSync('userInfo').unionId;
					let thirdId = uni.getStorageSync('thirdId');
					let portrait = uni.getStorageSync('portrait');
					let bindType = uni.getStorageSync('bindType');
					let dd = {}
					if (this.corpId) {
						dd = {
							userAccount: that.form.username,
							userPwd: md5(that.form.password),
							thirdId: thirdId,
							thirdPortrait: portrait,
							unionId: unionId,
							bindType: bindType,
							corpId: this.corpId,
						}
					} else {
						dd = {
							userAccount: that.form.username,
							userPwd: md5(that.form.password),
							thirdId: thirdId,
							thirdPortrait: portrait,
							unionId: unionId,
							bindType: bindType,
						}
					}
					this.getbindUserLogin(dd)
				}
				//已绑定
				if (c.existFlag == 1 && c.token) {
					uni.setStorageSync('currentPwd', this.form.password);
					uni.setStorageSync('userInfo', this.resultInfo);
					this.setRoleId(this.roleId);
					uni.$u.http.get('/base/mobile/sysMenuInfo/getMobileMenuListByRole').then(res => {
						if (res.code == 0) {
							if (res.data && res.data.length >= 0) {
								uni.setStorageSync('menu', res.data);
							}
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/work/index'
								})
							}, 500)
						}
					}).catch(error => {
						uni.$u.toast(error)
					})
				}
			},
			//隐私
			togoPrivacy() {
				uni.navigateTo({
					url: '/pages/subPackagesD/login/privacy'
				})
			},
			togouserxieyi() {
				uni.navigateTo({
					url: '/pages/subPackagesD/login/useragree'
				})
			},
			

			getbindUserLogin(dd) {
				var that = this;
				uni.$u.http.post(
						`/base/mobile/userInfo/bindUser`, dd)
					.then(res => {
						
						if (res.code == 0) {
							//先判断密码是否正确
							if (res.data.token == "") {
								this.showPwdTip = true
								this.errPwd = 5 - res.data.surplusCount
							} else {
								uni.setStorageSync('userInfo', res.data);
								that.setRoleId(that.roleId);
								if (res.data.modifyPwdFlag === 0) {
									uni.navigateTo({
										url: `/pages/subPackagesD/setPassword/index?oldPwd=${that.form.password}`
									})
								} else {
									
									//这里缓存前端权限列表
									uni.$u.http.get('/base/mobile/sysMenuInfo/getMobileMenuListByRole').then(res => {
										if (res.code == 0) {
											if (res.data && res.data.length >= 0) {
												uni.setStorageSync('menu', res.data);
											}
											setTimeout(() => {
												uni.switchTab({
													url: '/pages/work/index'
												})
											}, 500)
										}
									}).catch(error => {
										uni.$u.toast(error)
									})

								}
							}

						} else {
							uni.showToast({
								icon: "none",
								title: res.message
							})
						}
					}).catch(err => {})
			},
			
			//前往申请试用界面
			gotoApplyTrial() {
				uni.navigateTo({
					url: '/pages/subPackagesD/login/applyTrial'
				})
				
			},
		}
	};
</script>
<style lang="scss">
	.tip_box {
		width: 520rpx;
		padding: 40rpx 40rpx 0 40rpx;
		background-color: #fff;
		border-radius: 12rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.title {
			text-align: center;
			margin-bottom: 30rpx;
			font-size: 32rpx;
			font-weight: 500;
		}

		.top {
			font-size: 16px;
			font-weight: 400;
			margin-bottom: 64rpx;
			color: #4D4D4D;
			text-align: center;
		}

		.btn {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cacel_btn {
				text-align: center;
				font-size: 34rpx;
				font-weight: 500;
				color: #666666;
				width: 50%;
				height: 112rpx;
				line-height: 112rpx;
			}

			.forget_btn {
				text-align: center;
				font-size: 34rpx;
				font-weight: 500;
				color: #0F53AC;
				width: 50%;
				height: 112rpx;
				line-height: 112rpx;
			}
		}
	}

	.img-a {
		width: 100%;
		height: 600rpx;
		/* background-color: #0F53AC; */
		opacity: 1;
		// background: linear-gradient(180deg, rgba(2, 173, 130, 1) 0%, rgba(0, 255, 191, 1) 100%);
		background: url('../../../static/images/user/bg-login.png');
		background-size: 100% 100%;

		.t-b {
			text-align: left;
			font-size: 56rpx;
			color: #ffffff;
			padding: 250rpx 56rpx 0 56rpx;
			font-weight: 500;
			line-height: 80rpx;
			letter-spacing: 2rpx;

		}
		
		.t-c{
			font-size: 56rpx;
			color: #ffffff;
			line-height: 80rpx;
			font-weight: 500;
			padding-left: 58rpx;
		}

		image {
			width: 96rpx;
			height: 96rpx;
		}
	}

	.login-view {
		width: 100%;
		position: relative;
		margin-top: -120rpx;
		background-color: #ffffff;
		border-radius: 8% 8% 0% 0;

		.txt {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.t-login {
			width: 660rpx;
			margin: 0 auto;
			font-size: 28rpx;
			padding-top: 80rpx;

			button {
				font-size: 34rpx;
				background: #0F53AC;
				color: #fff;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 12rpx;
				font-weight: bold;
			}

			.t-a {
				position: relative;

				.zh-input {
					display: flex;
					height: 90rpx;
					line-height: 90rpx;
					margin-bottom: 64rpx;
					// border-bottom: 1px solid #e9e9e9;
					font-size: 28rpx;
					border-radius: 6px;
					background: rgba(242, 242, 242, 1);
					padding-left: 10rpx;
				}
			}

			.zdy-input {
				margin-bottom: 40rpx;
				font-size: 28rpx;
				border-radius: 6px;
				background: rgba(242, 242, 242, 1);
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;

				.pwd-left {
					width: 90%;
					font-size: 28rpx;
					height: 80rpx;
					background: rgba(242, 242, 242, 1);
					border: none;
				}

				.iconfont {
					font-size: 40rpx;
				}

			}

			.t-c {
				position: absolute;
				/* right: 22rpx; */
				top: 22rpx;
				background: #5677fc;
				color: #fff;
				font-size: 24rpx;
				border-radius: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 25rpx;
			}

			.t-d {
				text-align: center;
				color: #999;
				margin: 80rpx 0;
			}

			.t-e {
				text-align: center;
				width: 250rpx;
				margin: 80rpx auto 0;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.t-g {
				float: left;

				width: 50%;
			}

			.t-f text {
				margin-left: 20rpx;
				color: #aaaaaa;
				font-size: 27rpx;
			}

			.uni-input-placeholder {
				color: #aeaeae;
			}

			.t-f {
				text-align: center;
				margin: 150rpx 0 0 0;
				color: #666;
			}

			.cl {
				zoom: 1;
			}

			.cl:after {
				clear: both;
				display: block;
				visibility: hidden;
				height: 0;
				content: '\20';
			}

			.password {
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-right: 10rpx;

				.jz-pwd {
					display: flex;
					font-size: 28rpx;
					font-weight: 400;
					color: #2b2b2b;
				}

				.forgetpwd {
					font-size: 28rpx;
					color: #8C8C8C;
				}
			}

		}
	}

	.agreement {
		margin-top: 40rpx;
		padding-left: 50rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #2b2b2b;

		.agreement-txt {
			display: flex;
			justify-items: center;

			.privacy {
				color: rgba(15, 83, 172, 1);
			}
		}
	}
	
	.tel{
		position: fixed;
		bottom: 48rpx;
		font-size: 28rpx;
		color: #999999;
		width: 100%;
		text-align: center;
	}

	.trial-box {
		position: absolute;
		width: 100%;
		text-align: center;
		bottom: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.trial-icon {
			width: 14px;
			height: 14px;
			line-height: 14px;

			image {
				width: 14px;
				height: 14px;
			}
		}

		.trial-text {
			margin-left: 5px;
			color: #0F53AC;
			font-size: 14px;
		}
	}

	.com-itembootom {
		// display: flex;
		width: 100%;
		// justify-content: center;
		// align-items: center;

		.item-btn {
			border-radius: 12rpx;
			border: 1px solid #0F53AC;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #0F53AC;
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			box-sizing: border-box;
		}
		.item-btn2 {
			margin-bottom: 28rpx;
			border-radius: 12rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #ffffff;
			background: #0F53AC;
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			box-sizing: border-box;
		}
	}
</style>